<template>
    <div class="top">
        <h3><span>丨</span>基础采收信息</h3>
        <div style="text-align:right;margin-top:20px;" >
            <el-button @click="backHandler" class="back">返回</el-button>
        </div>
    </div>
    <!-- <el-form>
        <el-form-item label="选择块地" :label-width="120" prop="pc">
            <el-input v-model="formData.pc" />
        </el-form-item>
        <el-form-item label="块地作物" :label-width="120" prop="pd">
            <el-input v-model="formData.pd" />
        </el-form-item>
        <el-form-item label="采收人" :label-width="120" prop="realname">
            <el-input v-model="formData.realname" />
        </el-form-item>
        <el-form-item label="计划采收时间" :label-width="120" prop="pb">
            <el-input v-model="formData.pb" />
        </el-form-item>
    </el-form> -->
    <el-card class="box-card">
        <div><b>选择块地:</b>{{ formData.pc }}</div>
        <div><b>块地作物:</b>{{ formData.pd }}</div>
        <div><b>采收人:</b>{{ formData.realname }}</div>
        <div><b>计划采收时间:</b>{{ formData.pb }}</div>
    </el-card>
    <h3><span>丨</span>计划采收量</h3>
    <el-card class="box-card">
        <div><b>采收量:</b>{{ formData.pe }}</div>
    </el-card>
</template>

<script lang='ts' setup>
import type { IUserTableItem0 } from '@/interfaces/IUser';
import { reactive } from 'vue';
import { watch } from 'vue';
import { inject } from 'vue';
import router from '@/router';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';

import type { IOderPlans } from '@/stores/NewOrdersStore';
const newOrdersStore = useNewOrdersStore();
watch( () => newOrdersStore.orderPlans , (newVal: IOderPlans[]) => {
  newOrdersStore.orderPlans = newVal;
  console.log(489798465498498)
},);
const props = defineProps<{ checkRow: IUserTableItem0 | null }>()
const originFormData: any = {
    pc: '',
    pd: '',
    realname: '',
    pb: '',
    pe: '',
}

const formData = reactive({ ...newOrdersStore.orderPlans[0] })
watch(() => props.checkRow, (val) => {
    if (val) {
        Object.assign(formData, val)
    }
}, { immediate: true })

// 注入父组件currentView控制方法
const currentView = inject('currentView');
const backHandler = () => {
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
        // currentView.value = 'planlist';
        newOrdersStore.xs = true;
         router.push('/orders');
    }
}
</script>

<style lang='scss' scoped>
.el-form {
    margin: 20px 200px;
}

.el-input {
    width: 300px;
}

h3 {
    margin-bottom: 20px;
    color: white;
}

span {
    color: #52e1dc;
}

.el-card {
    background-color: #132E3F;
    border: 0;
    div {
        margin: 20px 300px;
        font-size: 20px;
        color: #368B90;
        font-size: 16px;
    }
}

.top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .back {
        background-color: rgb(84, 84, 129);
    color: white;
        width: 85px;
        height: 40px;
    }
}
.el-button{
    background-color: #1E4D58 !important;
    color: #4BC6C7;
    border: 0;
}
b{
    color: white;
    margin-right: 10px;
}
</style>